<!-- 网络状态提示组件 -->
<template>
  <view v-if="!isNetworkAvailable" class="network-status-tip">
    <view class="network-icon">📶</view>
    <view class="network-text">
      <text class="network-title">网络连接不可用</text>
      <text class="network-subtitle">请检查网络设置后重试</text>
    </view>
    <view class="network-action">
      <button class="retry-btn" @click="checkNetwork">重试</button>
    </view>
  </view>
</template>

<script>
import uniCloudService from '@/utils/uniCloudService.js'

export default {
  name: 'NetworkStatusTip',
  data() {
    return {
      isNetworkAvailable: true
    }
  },
  mounted() {
    this.checkNetwork();
    // 监听网络状态变化
    this.listenNetworkChange();
  },
  methods: {
    async checkNetwork() {
      try {
        const networkStatus = await uniCloudService.checkNetworkStatus();
        this.isNetworkAvailable = networkStatus.isConnected;
        
        // 通知父组件网络状态变化
        this.$emit('networkChange', networkStatus);
        
      } catch (error) {
        console.error('检查网络状态失败:', error);
        this.isNetworkAvailable = false;
        this.$emit('networkChange', { isConnected: false, networkType: 'unknown' });
      }
    },
    
    listenNetworkChange() {
      // 监听网络状态变化
      uni.onNetworkStatusChange((res) => {
        console.log('网络状态变化:', res);
        this.isNetworkAvailable = res.isConnected;
        this.$emit('networkChange', res);
      });
    }
  }
}
</script>

<style scoped>
.network-status-tip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.network-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.network-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.network-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.network-subtitle {
  font-size: 24rpx;
  opacity: 0.9;
}

.network-action {
  margin-left: 20rpx;
}

.retry-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 12rpx 24rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.retry-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}
</style>
